
<template>
  <div id="pdfviewer">
    <div style="margin-bottom:10px;text-align:center">
      <el-input-number v-model="page" :min="1" :max="numPages"></el-input-number> 共 {{numPages}} 页
      &nbsp;&nbsp;&nbsp;&nbsp;按百分比缩放 <el-input-number v-model="scole" :min="30" :max="100" :step="10"></el-input-number>
      <!-- <el-button @click="$refs.pdf.print()" icon="el-icon-printer" type="primary">打印</el-button> -->
      <el-button type="success" @click.native="pdfdownload">下载</el-button>
      <el-button type="primary" @click.native="pdfclose">关闭</el-button>
    </div>
    <div :style="'width: ' + scole + '%;margin:0 auto'">
      <pdf
        ref="pdf"
        style="border: 2px solid #333"
        :src="src"
        :page="page"
        :rotate="rotate"
        @progress="loadedRatio = $event"
        @num-pages="numPages = $event"
        @link-clicked="page = $event"
      ></pdf>
    </div>
  </div>
</template>

<script>
import pdf from 'vue-pdf'
export default {
  components: {
    pdf
  },
  name: 'Pdfviewer',
  props: {
    src: ''
  },
  data () {
    return {
      loadedRatio: 0,
      page: 1,
      numPages: 0,
      rotate: 0,
      scole: 50
    }
  },
  watch: {
    src () {
      // 依靠监控setpage的变化，重新设置页码，以防显示空白
      this.page = 1
      console.log('是否更新弹出窗口src:' + this.src)
    }
    // $refs.tree2.getCurrentNode()
  },
  methods: {
    pdfdownload () {
      window.open(this.src)
    },
    pdfclose: function () {
      this.$emit('pdfcloseevent')
    }
  }
}
</script>
<style>
</style>
